<template>
    <div class="start">
    	<div class="head">
    		<img src="../../assets/login.png">
		</div>
		<div class="content">
			<div class="phone">
				<span>用户名 :</span><input id="user" type="text" placeholder="请输入手机号" v-model="username" maxlength="11">
				<!-- <mt-field label="用户名 :" placeholder="请输入手机号" v-model="username">
				</mt-field> -->
			</div>
			<div class="phone">
				<span>密码 :</span><input id="user" type="password" placeholder="请输入密码(默认为手机后6位)" v-model="password">
				<!-- <mt-field label="密码 :" placeholder="请输入密码(默认为手机后6位)" type="password" v-model="password">
				</mt-field> -->
			</div>
			<div class="login">
				<mt-button size="large" type="danger" @click="submitForm">登录</mt-button>
			</div>
			<div class="other">
				<router-link to="">忘记密码？</router-link>
				<router-link to="/Reg">立即注册</router-link>
			</div>
		</div>
    </div>
</template>

<script>
	
	export default {
		name:'Login',
        // data(){
        // 	return{
        // 		username:'',
        // 		password:''
        // 	}
        // },
        // computed:{
        // 	users(){
        // 		return this.$store.state.users
        // 	}
        // },
        data () {
		  return {
		     ruleForm: {
		       userName: '', //用户名
		       password: ''  //密码
		     }
		  }
		},
        // methods:{
        // 	login(){
        // 		var that = this;
        // 		var flag = false;
        // 		this.users.forEach(function(user){
        // 			if(user.username == that.username && user.password == that.password){
        // 				that.$store.commit('setName',that.username);
        // 				window.location.href = '/#/Conference';
        // 				flag = true;
        // 				return;
        // 			}
        // 		});
        // 		console.log(1);
        // 		if(!flag){
        // 			alert('用户名或密码错误，请重新输入！');
        // 		}
        // 	}
        // }
        methods: {
		    //点击登录调用方法
		    submitForm(formName) {
		        //保存的账号
		        var name=this.ruleForm.userName;
		        //保存的密码
		        var pass=this.ruleForm.password;
		        if(name==''||name==null){
		          alert("请输入正确的用户名");
		          return
		        }else if(pass==''||pass==null) {
		          alert("请输入正确的密码");
		          return
		        }
		        //判断复选框是否被勾选 勾选则调用配置cookie方法
		        if(this.checked=true){
		            //传入账号名，密码，和保存天数3个参数
		          this.setCookie(name,pass,7);
		        }
		        //接口
		        var url='myserver/user/login';
		        this.$http.post(url,this.ruleForm,{emulateJSON:true})
		          .then(res=>{
		            if(res.body=="fail"){
		             alert("用户名或密码错误,请重新输入");
		              this.ruleForm.userName='';
		              this.ruleForm.password='';
		              return
		            } else{
		            alert（"登陆成功！"）
		              this.$router.push("/index")
		            }
		      });
		    },
		//设置cookie
		  setCookie(c_name,c_pwd,exdays) {
		    var exdate=new Date();//获取时间
		    exdate.setTime(exdate.getTime() + 24*60*60*1000*exdays);//保存的天数
		    //字符串拼接cookie
		    window.document.cookie="userName"+ "=" +c_name+";path=/;expires="+exdate.toGMTString();
		    window.document.cookie="userPwd"+"="+c_pwd+";path=/;expires="+exdate.toGMTString();
		  },
		  //读取cookie
		  getCookie:function () {
		    if (document.cookie.length>0) {
		      var arr=document.cookie.split('; ');//这里显示的格式需要切割一下自己可输出看下
		      for(var i=0;i<arr.length;i++){
		        var arr2=arr[i].split('=');//再次切割
		        //判断查找相对应的值
		        if(arr2[0]=='userName'){
		          this.ruleForm.userName=arr2[1];//保存到保存数据的地方
		        }else if(arr2[0]=='userPwd'){
		          this.ruleForm.password=arr2[1];
		        }
		      }
		    }
		  },
		  //清除cookie
		  clearCookie:function () {
		    this.setCookie("","",-1);//修改2值都为空，天数为负1天就好了
		  }
		},
		//页面加载调用获取cookie值
		mounted(){
		        this.getCookie()
        }
	}
</script>

<style scoped lang="less">
	.start{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 111;
		background: #fff;
		.head{
			width: 100%;
			height: 4rem;
			img{width: 100%;height: 100%;}
		}
		.content{
			padding: 30px 30px;
			.phone{
				font-size: 0.5rem;
				border-bottom: 1px solid #999;
				width: 100%;
				input{
					border: none; 	
					outline: none;
					font-size: 0.3rem;
					width: 68%;
				}
				span{
					font-size: 0.34rem;
					color: #444;
				}
			}
			.login{
				margin-top:30px; 
			}
			.other{
				overflow: hidden;
				a{font-size: 0.3rem;margin-top: 5px;color: #888;}
				a:first-child{
					float: left;
				}
				a:last-child{
					float: right;
				};
			}
		}
		

	}
</style>